<template>
  <div id="userManage">
    <div class="navBar">
      <!-- 项目检索 -->
      <div class="projectSearch">
        <span>项目名称</span>
        <div class="searchInput">
          <el-autocomplete
            class="inline-input"
            v-model="inputProjectName"
            :fetch-suggestions="queryProjectNameSearch"
            placeholder="请输入项目名称"
            @select="handleSelect"
          ></el-autocomplete>
          <span class="icon-search"></span>
        </div>
      </div>
      <!-- 登录名检索 -->
      <div class="loginNameSearch">
        <span>登录名称</span>
        <div class="searchInput">
          <el-autocomplete
            class="inline-input"
            v-model="inputLoginName"
            :fetch-suggestions="queryLoginNameSearch"
            placeholder="请输入登录名称"
            @select="handleSelect"
          ></el-autocomplete>
          <span class="icon-search"></span>
        </div>
      </div>
      <!-- 新增按钮 -->
      <div class="add" @click="addUser">
        <span></span>
        <span>新增</span>
      </div>
    </div>
    <div class="content">
      <!-- 项目表格 -->
      <div class="userTabel">
        <el-table :data="tableData" stripe style="width: 100%">
          <template v-for="(item,index) in tableNavList">
            <el-table-column
              v-if="item.prop != 'oper'"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column
              v-else
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <template v-for="(operLi,index) in operList">
                  <el-button
                    :key="index"
                    size="mini"
                    round
                    @click="handleEdit(scope.$index, scope.row,operLi.type)"
                  >{{operLi.name}}</el-button>
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="initPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="10"
        ></el-pagination>
      </div>
    </div>
    <div class="functionList" v-if="isShowFun">
      <!-- 新增用户或修改 -->
      <div class="formContent" v-if="funShow.addUser || funShow.modify">
        <div class="top">
          <funTitle :title="funShow.modify?'修改':'新增用户'" :type="funShow.modify?'modify':'addUser'" />
        </div>
        <div class="funContent">
          <el-form
            :inline="true"
            size="mini"
            label-position="right"
            label-width="80px"
            :model="addUserForm"
            ref="addUserForm"
            :rules="formRules"
          >
            <el-form-item label="登录名" :prop="funShow.modify?'':'loginName'">
              <el-input
                :disabled="funShow.modify"
                placeholder="请输入"
                v-model="addUserForm.loginName"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户名" :prop="funShow.modify?'':'userName'">
              <el-input :disabled="funShow.modify" placeholder="请输入" v-model="addUserForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码" :prop="funShow.modify?'':'password'">
              <el-input :disabled="funShow.modify" placeholder="请输入" v-model="addUserForm.password"></el-input>
            </el-form-item>
            <el-form-item label="账号类型" :prop="funShow.modify?'':'accountType'">
              <el-select
                :disabled="funShow.modify"
                v-model="addUserForm.accountType"
                placeholder="请选择"
              >
                <el-option label="个人账号" value="personal"></el-option>
                <el-option label="集团账号" value="group"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="small" label="管理项目">
              <el-select
                multiple
                collapse-tags
                v-model="addUserForm.manageProject"
                placeholder="请选择"
              >
                <el-option label="上水广场" value="上水广场"></el-option>
                <el-option label="K11购物中心" value="K11购物中心"></el-option>
                <el-option label="皇庭广场" value="皇庭广场"></el-option>
                <el-option label="圆方" value="圆方"></el-option>
                <el-option label="壹方天地" value="壹方天地"></el-option>
                <el-option label="壹方城" value="壹方城"></el-option>
                <el-option label="上水广场1" value="上水广场1"></el-option>
                <el-option label="K11购物中心1" value="K11购物中心1"></el-option>
                <el-option label="皇庭广场1" value="皇庭广场1"></el-option>
                <el-option label="圆方1" value="圆方1"></el-option>
                <el-option label="壹方天地1" value="壹方天地1"></el-option>
                <el-option label="壹方城1" value="壹方城1"></el-option>
                <el-option label="上水广场2" value="上水广场2"></el-option>
                <el-option label="K11购物中心2" value="K11购物中心2"></el-option>
                <el-option label="皇庭广场2" value="皇庭广场2"></el-option>
                <el-option label="圆方2" value="圆方2"></el-option>
                <el-option label="壹方天地2" value="壹方天地2"></el-option>
                <el-option label="壹方城2" value="壹方城2"></el-option>
              </el-select>
              <div class="tagsShow">
                <el-tag
                  :key="index"
                  v-for="(tag,index) in addUserForm.manageProject"
                  closable
                  size="small"
                  @close="deleteManageProject(tag)"
                >{{tag}}</el-tag>
              </div>
            </el-form-item>
            <el-form-item v-if="!funShow.modify" size="medium">
              <el-button round @click="closeFun('addUser')">取消</el-button>
              <el-button @click="submitAddUserForm('addUserForm')">确定</el-button>
            </el-form-item>
            <el-form-item v-else size="medium">
              <el-button round @click="closeFun('modify')">取消</el-button>
              <el-button @click="submitModifyForm('addUserForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 重置密码 -->
      <div class="formContent resetPassword" v-if="funShow.resetPassword">
        <div class="top">
          <funTitle title="重置密码" type="resetPassword" />
        </div>
        <div class="funContent">
          <el-form
            :inline="true"
            size="small"
            label-position="right"
            label-width="80px"
            :model="resetPasswordForm"
            ref="resetPasswordForm"
            :rules="formRules"
            status-icon
          >
            <el-form-item label="登录名">
              <el-input disabled v-model="resetPasswordForm.loginName"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input disabled v-model="resetPasswordForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="resetPassword">
              <el-input placeholder="请输入" type="password" v-model="resetPasswordForm.resetPassword"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                placeholder="请输入"
                type="password"
                v-model="resetPasswordForm.confirmPassword"
              ></el-input>
            </el-form-item>
            <el-form-item size="medium">
              <el-button round @click="closeFun('resetPassword')">取消</el-button>
              <el-button @click="submitResetPasswordForm('resetPasswordForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import funTitle from "../../components/funTitle";
export default {
  props: {},
  data() {
    const resetPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.resetPasswordForm.confirmPassword !== "") {
          this.$refs.resetPasswordForm.validateField("confirmPassword");
        }
        callback();
      }
    };
    const confirmPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetPasswordForm.resetPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      inputProjectName: "",
      // 项目列表
      projectList: [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号"
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
        },
        { value: "泷千家(天山西路店)", address: "天山西路438号" },
        {
          value: "胖仙女纸杯蛋糕（上海凌空店）",
          address: "上海市长宁区金钟路968号1幢18号楼一层商铺18-101"
        }
      ],
      inputLoginName: "",
      // 是否显示功能
      isShowFun: false,
      // 功能菜单显隐设置
      funShow: {
        addUser: false,
        resetPassword: false,
        modify: false
      },
      // 增加用户名表单信息
      addUserForm: {
        loginName: "",
        userName: "",
        password: "",
        accountType: "",
        manageProject: []
      },
      // 重置密码表单信息
      resetPasswordForm: {
        loginName: "",
        userName: "",
        resetPassword: "",
        confirmPassword: ""
      },
      // 表单规则
      formRules: {
        loginName: [
          { required: true, message: "请输入登录名", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        accountType: [
          { required: true, message: "请选择账号类型", trigger: "blur" }
        ],
        resetPassword: [{ validator: resetPassword, trigger: "blur" }],
        confirmPassword: [{ validator: confirmPassword, trigger: "blur" }]
      },
      // 默认分页
      initPage: 1,
      // 表格标题
      tableNavList: [
        {
          label: "序号",
          prop: "No",
          width: "80"
        },
        {
          label: "ID",
          prop: "ID",
          width: "80"
        },
        {
          label: "登录名",
          prop: "loginName",
          width: "200"
        },
        {
          label: "用户名",
          prop: "userName",
          width: "200"
        },
        {
          label: "账号类型",
          prop: "accountType",
          width: "200"
        },
        {
          label: "管理项目",
          prop: "manageProject",
          width: "200"
        },
        {
          label: "操作",
          prop: "oper"
        }
      ],
      // 表格数据
      tableData: [
        {
          No: "1",
          ID: "31",
          loginName: "easy2walk",
          userName: "路易寻管理",
          accountType: "集团账号",
          manageProject:
            "上水广场、皇庭广场、海港城、新城市广场一期、新城市广场三期"
        },
        {
          No: "2",
          ID: "32",
          loginName: "wangc",
          userName: "路易寻管理",
          accountType: "集团账号",
          manageProject:
            "宝安大千里、皇庭广场、海港城、新城市广场一期、新城市广场三期"
        },
        {
          No: "3",
          ID: "33",
          loginName: "ljh",
          userName: "路易寻管理",
          accountType: "集团账号",
          manageProject: "K11、皇庭广场、海港城、新城市广场一期、新城市广场三期"
        }
      ],
      // 操作列表
      operList: [
        {
          name: "重置密码",
          type: "resetPassword"
        },
        {
          name: "修改",
          type: "modify"
        }
      ],
      operIndex: null
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 输入框检索完毕选中事件
    handleSelect(item) {
      console.log("item", item);
    },
    // 项目名称搜索框检索
    queryProjectNameSearch(queryString, callback) {
      const projectList = this.projectList;
      const results = queryString
        ? projectList.filter(this.createFilter(queryString))
        : projectList;
      callback(results);
    },
    // 登录名称搜索框检索
    queryLoginNameSearch(queryString, callback) {
      const projectList = this.projectList;
      const results = queryString
        ? projectList.filter(this.createFilter(queryString))
        : projectList;
      callback(results);
    },
    // 搜索筛选
    createFilter(queryString) {
      return results => {
        return (
          results.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 打开增加用户功能弹窗
    addUser() {
      this.isShowFun = true;
      this.funShow.addUser = true;
    },
    // 关闭功能弹窗
    closeFun(funType) {
      this.isShowFun = false;
      this.funShow[funType] = false;
      // 重置新增项目内容
      this.addUserForm = {
        loginName: "",
        userName: "",
        password: "",
        accountType: "",
        manageProject: []
      };

      this.resetPasswordForm = {
        loginName: "",
        userName: "",
        resetPassword: "",
        confirmPassword: ""
      };

      if (funType === "modify") {
        this.tableData[this.operIndex].manageProject = this.tableData[
          this.operIndex
        ].manageProject.join("、");
      }
    },
    // 新增用户表单提交以及验证
    submitAddUserForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          // 重置新增项目内容
          this.addUserForm = {
            loginName: "",
            userName: "",
            password: "",
            accountType: "",
            manageProject: []
          };
          this.closeFun("addUser");
          this.$message({
            message: "修改成功",
            type: "success"
          });
        }
      });
    },
    // 修改用户表单提交以及验证
    submitModifyForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          // 重置新增项目内容
          this.addUserForm = {
            loginName: "",
            userName: "",
            password: "",
            accountType: "",
            manageProject: []
          };
          this.closeFun("modify");
          this.$message({
            message: "修改成功",
            type: "success"
          });
        }
      });
    },
    submitResetPasswordForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          // 重置新增项目内容
          this.resetPasswordForm = {
            loginName: "",
            userName: "",
            resetPassword: "",
            confirmPassword: ""
          };
          this.closeFun("resetPassword");
          this.$message({
            message: "密码重置成功",
            type: "success"
          });
        }
      });
    },
    // 删除项目标签
    deleteManageProject(tag) {
      this.addUserForm.manageProject.splice(
        this.addUserForm.manageProject.findIndex(item => item === tag),
        1
      );
    },
    // 打开功能弹窗
    handleEdit(index, row, type) {
      this.operIndex = index;
      this.isShowFun = true;
      this.funShow[type] = true;
      if (type === "modify") {
        this.addUserForm = row;
        if (row.manageProject.indexOf("、") != -1) {
          this.addUserForm.manageProject = row.manageProject.split("、");
        }
      } else if (type === "resetPassword") {
        this.resetPasswordForm = {
          loginName: row.loginName,
          userName: row.userName,
          resetPassword: "",
          confirmPassword: ""
        };
      }
    },
    // 切换分页触发函数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  components: {
    funTitle
  }
};
</script>

<style lang="less">
#userManage {
  position: relative;
  width: 100%;
  height: 100%;
  .navBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 80px;
    background-color: #fff;
    -webkit-user-select: none;
    .projectSearch {
      position: absolute;
      width: 350px;
      height: 80px;
      top: 50%;
      left: 16px;
      transform: translateY(-50%);
      span {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 66px;
        height: 18px;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        color: rgba(56, 56, 56, 1);
      }
      .searchInput {
        position: absolute;
        left: 72px;
        top: 50%;
        transform: translateY(-50%);
        width: 240px;
        height: 30px;
        .el-autocomplete {
          position: relative;
          width: 100%;
          height: 100%;
          .el-input {
            width: 100%;
            height: 100%;
            .el-input__inner {
              width: 100%;
              height: 100%;
              border-radius: 15px;
              background: rgba(239, 240, 244, 1);
              font-size: 12px;
              border: 1px solid #dcdfe6;
            }
            .el-input__inner:focus {
              border: 1px solid #5d69bd;
            }
          }
        }
        .icon-search {
          position: absolute;
          width: 15px;
          height: 15px;
          top: 50%;
          left: 210px;
          transform: translateY(-50%);
          background: url("../../assets/images/search.png") no-repeat center;
          background-size: contain;
        }
      }
    }
    .loginNameSearch {
      position: absolute;
      width: 350px;
      height: 80px;
      top: 50%;
      left: 390px;
      transform: translateY(-50%);
      span {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 66px;
        height: 18px;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        color: rgba(56, 56, 56, 1);
      }
      .searchInput {
        position: absolute;
        left: 72px;
        top: 50%;
        transform: translateY(-50%);
        width: 240px;
        height: 30px;
        .el-autocomplete {
          position: relative;
          width: 100%;
          height: 100%;
          .el-input {
            width: 100%;
            height: 100%;
            .el-input__inner {
              width: 100%;
              height: 100%;
              border-radius: 15px;
              background: rgba(239, 240, 244, 1);
              font-size: 12px;
              border: 1px solid #dcdfe6;
            }
            .el-input__inner:focus {
              border: 1px solid #5d69bd;
            }
          }
        }
        .icon-search {
          position: absolute;
          width: 15px;
          height: 15px;
          top: 50%;
          left: 210px;
          transform: translateY(-50%);
          background: url("../../assets/images/search.png") no-repeat center;
          background-size: contain;
        }
      }
    }
    .add {
      position: absolute;
      width: 100px;
      height: 30px;
      border: 1px solid rgba(93, 105, 189, 1);
      box-shadow: 0px 0px 14px #dee2f3;
      opacity: 1;
      border-radius: 18px;
      right: 36px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(93, 105, 189, 1);
      transition: all 0.5s;
      cursor: pointer;
      &:hover {
        color: #fff;
        background-color: #5d69bd;
        span:nth-child(1) {
          background-image: url("../../assets/images/addHover.png");
        }
      }
      span:nth-child(1) {
        position: absolute;
        width: 15px;
        height: 15px;
        top: 51%;
        left: 24px;
        transform: translateY(-50%);
        background: url("../../assets/images/add.png") no-repeat center;
        background-size: contain;
        transition: all 0.5s;
      }
      span:nth-child(2) {
        position: absolute;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        left: 45px;
        top: 50%;
        transform: translateY(-50%);
        letter-spacing: 2px;
      }
    }
  }
  .content {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 98.6%;
    height: 85.2%;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(236, 238, 249, 1);
    .userTabel {
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translateX(-50%);
      width: 98.2%;
      height: 770px;
      .el-table {
        .el-table--striped .el-table__body tr.el-table__row--striped td {
          background: rgba(248, 249, 250, 1);
        }
        thead {
          color: rgba(0, 12, 23, 1);
        }
        td,
        th.is-leaf {
          border-bottom: 0px;
        }
        td {
          padding: 20px 0;
        }
        th {
          background: rgba(239, 240, 244, 1);
        }
      }
      .is-round {
        color: rgba(93, 105, 189, 1);
        font-size: 12px;
        font-weight: 400;
        border: 1px solid rgba(93, 105, 189, 1);
        transition: all 0.5s;
        &:hover {
          color: #fff;
          background-color: #5d69bd;
        }
      }
    }
    .pagination {
      position: absolute;
      bottom: 44px;
      right: 20px;
      .el-pagination__total {
        border: 1px solid rgba(219, 219, 219, 1);
        color: rgba(92, 92, 92, 1);
        border-radius: 12px;
        width: 102px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin-top: 3px;
        font-size: 12px;
      }
      .el-pagination__jump {
        position: relative;
        .el-input__inner {
          border-radius: 12px;
          width: 38px;
          height: 24px;
          line-height: 24px;
          color: rgba(92, 92, 92, 1);
          font-size: 12px;
          &:hover {
            border: 1px solid #5d69bd;
          }
        }
        .el-input__inner:focus {
          border: 1px solid #5d69bd;
        }
      }
      .el-pager {
        margin-top: 2px;
        li {
          position: relative;
          width: 24px;
          height: 24px;
          min-width: 0px;
          line-height: 24px;
          margin-left: 5px;
          transition: all 0.5s;
          &:hover {
            color: #5d69bd;
          }
        }
        li.active {
          background: rgba(93, 105, 189, 1);
          opacity: 1;
          border-radius: 50%;
          color: #fff;
        }
        .el-icon-d-arrow-left:before {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .el-icon-d-arrow-right:before {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .btn-prev:hover,
      .btn-next:hover {
        color: #5d69bd;
      }
    }
  }
  .functionList {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 98.6%;
    height: 85.2%;
    background: rgba(0, 12, 23, 0.2);
    box-shadow: 0px 0px 19px rgba(36, 176, 171, 0.11);
    z-index: 100;
    // 取消提交按钮
    .el-form-item--medium {
      position: absolute;
      width: 200px;
      right: 0;
      bottom: -10px;
      .el-button {
        width: 88px;
        height: 32px;
        border-radius: 17px;
        text-align: center;
        padding: 0;
        background: rgba(93, 105, 189, 1);
        color: #fff;
        &:hover {
          border: 1px solid #5d69bd;
        }
      }
      .is-round {
        background: rgba(236, 238, 249, 1);
        color: #5d69bd;
      }
    }
    .formContent {
      position: absolute;
      left: 50%;
      top: 43%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 400px;
      background: rgba(255, 255, 255, 1);
      border-radius: 6px;
      .top {
        width: 100%;
        height: 30px;
        margin-top: 11px;
      }
      .funContent {
        margin: 0 auto;
        padding-top: 20px;
        width: 638px;
        height: 280px;
        border-bottom: 1px solid rgba(226, 235, 243, 1);
        .tagsShow {
          position: relative;
          width: 100%;
          max-width: 500px;
          min-width: 500px;
          max-height: 80px;
          min-height: 60px;
          overflow: auto;
          padding: 10px 0;
          border-radius: 3px;
          margin-top: 10px;
          border: 1px solid #dcdfe6;
          .el-tag {
            margin-left: 10px;
          }
        }
        .tagsShow::-webkit-scrollbar {
          -webkit-appearance: none;
          width: 8px;
        }
        .tagsShow::-webkit-scrollbar-thumb {
          border-radius: 4px;
          border: 2px solid white;
          background-color: rgba(0, 0, 0, 0.3);
        }
        .tagsShow::-webkit-scrollbar-thumb:hover {
          background-color: rgba(0, 0, 0, 0.8);
        }
        .tagsShow::-webkit-scrollbar-thumb:window-inactive {
          background-color: rgba(0, 0, 0, 0.2);
        }
        .el-select{
          .el-input__inner{
            width: 176px;
          }
        }
      }
    }
    .resetPassword {
      width: 472px;
      height: 460px;
      .funContent {
        width: 430px;
        height: 340px;
        .el-form {
          width: 425px;
          margin: 40px auto;
          .el-form-item--small {
            width: 350px;
            margin-left: 37.5px;
          }
          .el-input__inner {
            width: 220px;
          }
        }
      }
    }
  }
}
</style>
